<template>
    <div>
       <div class="cationhead">
           <div>
             <el-row :gutter="20">
                <el-col :span="4"><div class="grid-content bg-purple" >
                 <el-dropdown>
                  <span class="el-dropdown-link">{{title}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="opt1 in option.opt1"><span>{{opt1.text}}</span></el-dropdown-item>
                  </el-dropdown-menu>
                 </el-dropdown>
                </div>
                </el-col>
                <el-col :span="4"><div class="grid-content bg-purple">
                <el-dropdown>
                  <span class="el-dropdown-link">{{title2}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="opt1 in option.opt1"><span>{{opt1.text}}</span></el-dropdown-item>
                  </el-dropdown-menu>
                 </el-dropdown>
                </div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple">
                     <el-dropdown>
                  <span class="el-dropdown-link">{{title3}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="opt1 in option.opt1"><span>{{opt1.text}}</span></el-dropdown-item>
                  </el-dropdown-menu>
                 </el-dropdown>
                </div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple">
                     <el-dropdown>
                  <span class="el-dropdown-link">{{title4}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="opt1 in option.opt1"><span>{{opt1.text}}</span></el-dropdown-item>
                  </el-dropdown-menu>
                 </el-dropdown>
                </div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple">
                     <el-dropdown>
                  <span class="el-dropdown-link">{{title5}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item v-for="opt1 in option.opt1"><span>{{opt1.text}}</span></el-dropdown-item>
                  </el-dropdown-menu>
                 </el-dropdown>
                </div></el-col>
             </el-row>
           </div>
       </div>
        <div class="cationCenter">
            sanashbjh
               <ul class="cationCenterUl">
                   <li>
                       <div>

                       </div>
                   </li>
               </ul>
           </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
        title:"品类",
        title2:'商品',
        title3:'全部',
        title4:'规格',
        title5:'销量由高到低',
        option:{
            opt1:[
                {text:'活鲜产品'},
                {text:'冰鲜产品'},
                {text:'冷冻产品'},
                {text:'海鲜生态类产品'},
                {text:'预包装食品'}
            ],
        }
    };
  }
};
</script>

<style>
* {
  margin: 0px;
  padding: 0px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  /* background: #99a9bf; */
}
.bg-purple {
  /* background: #d3dce6; */
}
.bg-purple-light {
  /* background: #e5e9f2; */
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.cationhead {
  width: 100%;
  height: 50px;
  background: #fff;
}
.cationhead > div {
  width: 50%;
  padding-top: 1%;
  margin-left: 14.5%;
}
.grid-content {
  border-radius: 4px;
  min-height: 49px;
}
.el-dropdown-link{
   font-size: 15px;
   line-height: 49px;
}
.cationCenter{
    width: 80%;
    height: 100%;
    background: red;
    margin: 0 auto;
}
.cationCenterUl {
    display:flex;
}
.cationCenterUl li div{
    
}
</style>
